<template>
	<div id="app">
		<!-- 顶部搜索 -->
		<div class="top">
			<el-row>
				<el-col :xs="{ span: 22, offset: 1 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 16, offset: 2 }" :lg="{ span: 16, offset: 2 }">
					<form action class="search_box">
						<input type="text" v-model="keyword" placeholder="请输入想搜索的内容" @keyup="getSimilarList(keyword)" />
						<div class="search_btn" @click="search(keyword)">
							<i class="el-icon-search"></i>
							百度一下
						</div>
						<div class="search_list" v-show="show_searchlist">
							<div class="search_word" v-for="(item, index) in similarList" :key="index" @click="search(item.q)">{{ item.q }}</div>
						</div>
					</form>
				</el-col>
				<el-col class="hidden-sm-and-down" :md="6" :lg="6">
					<div class="top_tool">
						<a href="javascript:;" :plain="true" @click="addFavorite()">
							<i class="el-icon-star-on"></i>
							收藏导航
						</a>
						<a class="hidden-md-and-down" style="cursor: pointer;" @click="goToQQ()">
							<i class="el-icon-chat-dot-square"></i>
							联系我
						</a>
						<a href="https://fanyi.baidu.com/" target="_blank">
							<i class="el-icon-collection"></i>
							翻译工具
						</a>
					</div>
				</el-col>
			</el-row>
		</div>
		<!-- 主体部分 -->
		<el-row type="flex" justify="space-around">
			<!-- 侧边楼层导航 -->
			<el-col class="hidden-sm-and-down" :sm="1" :md="2">
				<div class="sidebar">
					<div class="nav" v-for="(item, index) in siteList" :key="item.ftitle" @click="setFloorNavMountClick(index)">{{ item.ftitle }}</div>
				</div>
			</el-col>
			<!-- 站点主体部分 -->
			<el-col :xs="22" :sm="22" :md="20"><siteList class="site_box" :siteList="siteList" ref="banner"></siteList></el-col>
			<!-- 联系我 -->
			<el-col class="hidden-md-and-down" :md="1">
				<div class="contact">
					<transition name="el-fade-in-linear">
						<div class="item" id="to_top" v-show="show_top" @click="toTop()">
							<svg class="icon" aria-hidden="true"><use xlink:href="#icon-huojian" /></svg>
						</div>
					</transition>
					<div class="contact_item">
						<div class="item" id="qq" @click="goToQQ()" @mouseover="icon.qq = '#icon-qq-color'" @mouseout="icon.qq = '#icon-qq'">
							<svg class="icon" aria-hidden="true"><use :xlink:href="icon.qq" /></svg>
						</div>
						<div
							id="weixin"
							class="item weixin_btn"
							@mouseover="
								show_weixin = true
								icon.weixin = '#icon-weixin-color'
							"
							@mouseout="
								show_weixin = false
								icon.weixin = '#icon-weixin'
							"
						>
							<svg class="icon" aria-hidden="true"><use :xlink:href="icon.weixin" /></svg>
							<div>
								<transition name="el-zoom-in-center"><img src="https://qiniuyun.zhichi921.com/weixin.jpg" alt v-show="show_weixin" /></transition>
							</div>
						</div>
						<div class="item" id="fankui" @click="dialogFormVisible = true">反馈</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<!-- 综合 -->
		<el-row class="complex">
			<el-col :xs="{ span: 16, offset: 4 }" :sm="{ span: 10, offset: 2 }" :md="{ span: 5, offset: 2 }" :lg="5">
				<h2>程序员神器</h2>
				<div class="tools">
					<a v-for="(item, index) in toolList" :key="index" :title="item.title" :href="item.url" target="_blank">
						<span>{{ item.desc }}</span>
						<i :class="item.icon"></i>
					</a>
				</div>
			</el-col>
			<el-col :xs="{ span: 16, offset: 4 }" :sm="10" :md="{ span: 5, offset: 0 }" :lg="5">
				<h2>前沿资讯</h2>
				<div class="ganhuolist">
					<div v-for="(item, index) in ganhuoList" :key="item._id">
						<span>{{ index + 1 }}</span>
						<a :href="item.url" target="_blank">{{ item.desc }}</a>
					</div>
				</div>
			</el-col>
			<el-col :xs="{ span: 16, offset: 4 }" :sm="{ span: 10, offset: 2 }" :md="{ span: 5, offset: 0 }" :lg="5">
				<h2>联系站长</h2>
				<div class="wechat">
					<img src="./assets/weixin_code.jpg" alt />
					<p>
						扫描微信号：
						<span>vaevie520</span>
					</p>
				</div>
			</el-col>
			<el-col :xs="{ span: 16, offset: 4 }" :sm="10" :md="{ span: 5, offset: 0 }" :lg="5">
				<h2>已收录人气酷站</h2>
				<div class="count">
					<strong>
						{{ sitetotalnum }}
						<span>个</span>
					</strong>
					<div class="updata_time">
						<i class="el-icon-time"></i>
						导航更新日期：{{ updata_time.year }}-{{ updata_time.month }}-{{ updata_time.day }}
					</div>
					<div class="recommend">
						还有更赞的
						<el-button type="primary" icon="el-icon-edit" @click="dialogFormVisible = true">我来推荐</el-button>
					</div>
					<div class="auther">
						<p>
							Design:
							<a id="lofter" href="https://vaevie.lofter.com/" target="_blank">@vaevie520 LOFTER</a>
						</p>
						<p>
							Coding:
							<a id="mayun" href="https://gitee.com/vaevie520/" target="_blank">@vaevie520 码云</a>
						</p>
					</div>
				</div>
			</el-col>
		</el-row>

		<!-- 底部版权 -->
		<div class="footer">
			<p>本网站设计及数据均受版权保护，任何公司及个人不得以任何方式复制，特此声明。</p>
			<p>
				<span>友情链接</span>
				<span>广告合作</span>
				<span>联系我们</span>
				<span>关于我们</span>
			</p>
			<div class="copyright">
				<span>Copyright © 2020 小U(XIAOU) -</span>
				<a href="http://www.beian.miit.gov.cn/" target="_blank">豫ICP备18003915号-1</a>
				<img src="./assets/beian.png" alt />
				<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41019702002723" target="_blank">豫公网安备 41019702002723号</a>
			</div>
		</div>
		<!-- 看板娘组件 -->
		<Cute></Cute>

		<!-- 反馈弹窗 -->
		<div>
			<el-dialog title="意见反馈" :visible.sync="dialogFormVisible">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" v-loading="formloading">
					<el-form-item prop="feedback_content">
						<el-input id="textarea" type="textarea" :rows="4" placeholder="请输入内容" v-model="ruleForm.feedback_content"></el-input>
					</el-form-item>
					<div class="rate">评分</div>
					<el-rate id="rata" v-model="rate" show-text></el-rate>
					<el-form-item class="form-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button id="submit" type="primary" @click="feedback('ruleForm')">确 定</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import siteList from '@/components/siteList.vue'
import Cute from '@/components/Cute.vue'
export default {
	name: 'app',
	data() {
		return {
			keyword: '',
			siteList: [],
			toolList: [],
			ganhuoList: [],
			similarList: [],
			sitetotalnum: '',
			element: {
				nav_item: null,
				floor_item: null
			},
			show_top: false,
			show_weixin: false,
			show_searchlist: true,
			dialogFormVisible: false,
			ruleForm: {
				feedback_content: ''
			},
			rules: {
				feedback_content: [{ required: true, message: '请填写反馈内容', trigger: 'blur' }]
			},
			rate: 5,
			formloading: false,
			timer: null,
			icon: {
				qq: '#icon-qq',
				weixin: '#icon-weixin'
			},
			updata_time: {
				year: '',
				month: '',
				day: ''
			},
			loading: null,
			searchTimer: null,
			qq: '1843544121'
		}
	},
	components: {
		siteList,
		Cute
	},
	created() {
		this.loading = this.$loading({ fullscreen: true })
		this.getsiteList()
		this.gettoolList()
		this.getGanHuo()
		this.getNow()
		// this.loading.close();
	},
	methods: {
		getsiteList() {
			this.$axios.get('./api/site.json').then(res => {
				this.siteList = res.data
				// 获取站点总数量
				let total = 0
				res.data.forEach((item, index) => {
					total += item.list.length
				})
				// 总数量再加21
				this.sitetotalnum = total + 21
			})
		},
		gettoolList() {
			this.$axios.get('./api/tools.json').then(res => {
				// console.log(res.data);
				this.toolList = res.data
			})
		},
		// 获取干货资源
		getGanHuo() {
			this.$axios.get('./api/zixun.json').then(res => {
				// 获取的列表为43条数据 ，这里随机取十条
				const oldlist = res.data.results.前端
				let newlist = []
				while (newlist.length < 10) {
					let x = Math.floor(Math.random() * 43)
					if (newlist.indexOf(oldlist[x]) == -1) {
						newlist.push(oldlist[x])
					}
				}
				// console.log(newlist);
				this.ganhuoList = newlist
			})
		},
		// 获取当前时间
		getNow() {
			const date = new Date()
			this.updata_time.year = date.getFullYear().toString()
			this.updata_time.month = (date.getMonth() + 1).toString().padStart(2, '0')
			this.updata_time.day = (date.getDate() - 1).toString().padStart(2, '0')
		},
		search(keyword) {
			window.open('https://www.baidu.com/s?wd=' + keyword + '&submit=', '_blank')
		},
		getSimilarList(keyword) {
			// 防止汉字没输入进去时就请求接口
			clearTimeout(this.searchTimer)
			this.searchTimer = setTimeout(async () => {
				const { data: res } = await this.$axios.get('https://bird.ioliu.cn/v2?url=https://www.baidu.com/sugrec', {
					params: {
						prod: 'pc',
						wd: keyword
					}
				})
				this.similarList = res.g
			}, 500)
		},
		goToQQ() {
			window.open('http://wpa.qq.com/msgrd?v=3&uin=' + this.qq + '&site=qq&menu=yes', '_blank')
		},
		feedback(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					// 发送邮件请求
					this.formloading = true
					this.$axios
						.get('https://mail.zhichi921.com/index.php/email', {
							params: {
								content: this.ruleForm.feedback_content,
								rata: this.rate
							}
						}) // 接收回调
						.then(res => {
							console.log(res)
							if (res.data.code == 1) {
								this.$message({
									message: res.data.msg,
									type: 'success'
								})
								this.ruleForm.feedback_content = ''
								this.formloading = false
								this.dialogFormVisible = false
							} else {
								this.formloading = false
								this.$message.error(res.data.msg)
							}
						})
				} else {
					return false
				}
			})
		},
		// 收藏网站
		addFavorite() {
			this.$message({
				message: '请使用Ctrl+D添加至浏览器收藏夹',
				center: true
			})
		},
		/**
		 * 监听窗口滚动楼层导航动态定位
		 */
		floorSrcollEventListener() {
			const { nav_item, floor_item } = this.element
			const window_scrollTop = document.documentElement.scrollTop || document.body.scrollTop
			for (let i = 0, len = floor_item.length; i < len; i++) {
				let floor_offsetTop = floor_item[i].offsetTop - floor_item[0].offsetTop
				if (window_scrollTop >= floor_offsetTop) {
					for (let n = 0, len = nav_item.length; n < len; n++) {
						const current_classList = nav_item[n].classList
						i === n ? current_classList.add('active') : current_classList.remove('active')
					}
				}
			}
		},
		/**
		 * 设置楼层导航事件驱动方法
		 * @param {Number} index  楼层下标
		 */
		setFloorNavMountClick(index) {
			const { floor_item } = this.element
			const floor_offsetTop = floor_item[index].offsetTop - floor_item[0].offsetTop + 96,
				window_scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
				timer = {
					step: 60,
					times: 16,
					FLOOR_OFFSETTOP: floor_offsetTop
				}
			if (window_scrollTop > floor_offsetTop) {
				this.setFloorScrollArrowUp(timer)
			} else if (window_scrollTop == floor_offsetTop) {
				return false
			} else {
				this.setFloorScrollArrowDown(timer)
			}
		},
		/**
		 * 设置楼层向上滚动
		 * @param {Object} timer 定时器配置
		 */
		setFloorScrollArrowUp(timer) {
			clearInterval(this.timer)
			this.timer = setInterval(() => {
				let window_scrollTop = document.documentElement.scrollTop || document.body.scrollTop
				if (window_scrollTop <= timer.FLOOR_OFFSETTOP) {
					document.documentElement.scrollTop = timer.FLOOR_OFFSETTOP
					document.body.scrollTop = timer.FLOOR_OFFSETTOP
					clearInterval(this.timer)
				} else {
					document.documentElement.scrollTop = window_scrollTop - timer.step
					document.body.scrollTop = window_scrollTop - timer.step
				}
			}, timer.times)
		},
		/**
		 * 设置楼层向下滚动
		 * @param {Object} timer 定时器配置
		 */
		setFloorScrollArrowDown(timer) {
			clearInterval(this.timer)
			this.timer = setInterval(() => {
				let window_scrollTop = document.documentElement.scrollTop || document.body.scrollTop
				if (window_scrollTop >= timer.FLOOR_OFFSETTOP) {
					document.documentElement.scrollTop = timer.FLOOR_OFFSETTOP
					document.body.scrollTop = timer.FLOOR_OFFSETTOP
					clearInterval(this.timer)
				} else {
					document.documentElement.scrollTop = window_scrollTop + timer.step
					document.body.scrollTop = window_scrollTop - timer.step
				}
			}, timer.times)
		},
		// 显示返回顶部按钮
		handleScroll() {
			let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
			if (scrollTop >= 120) {
				this.show_top = true
			} else if (scrollTop < 120) {
				this.show_top = false
			}
		},
		// 返回顶部
		toTop() {
			let top = document.documentElement.scrollTop || document.body.scrollTop
			// 实现滚动效果
			const timeTop = setInterval(() => {
				document.body.scrollTop = document.documentElement.scrollTop = top -= 50
				if (top <= 0) {
					clearInterval(timeTop)
				}
			}, 10)
		}
	},
	mounted() {
		// 获取楼层及导航元素
		setTimeout(() => {
			this.element = {
				nav_item: document.getElementsByClassName('nav'),
				floor_item: document.getElementsByClassName('floor-item')
			}
			this.element.nav_item[0].classList.add('active')
			window.addEventListener('scroll', this.floorSrcollEventListener)
		}, 200)
		// 添加监听屏幕滚动事件
		window.addEventListener('scroll', this.handleScroll)
		// 添加百度统计
		let _hmt = _hmt || []
		;(function() {
			let hm = document.createElement('script')
			hm.src = 'https://hm.baidu.com/hm.js?2c7e795a8d8c2015f0fb588d80cb73c4'
			let s = document.getElementsByTagName('script')[0]
			s.parentNode.insertBefore(hm, s)
		})()
		this.loading.close()
	},
	beforeDestroy() {
		window.removeEventListener('scroll', this.floorSrcollEventListener)
	}
}
</script>

<style scoped lang="scss">
.top {
	height: 96px;
	background: #3295d9;
	padding: 25px 0;
	.search_box {
		position: relative;
		height: 42px;
		input {
			box-sizing: border-box;
			width: 100%;
			border: none;
			font-size: 15px;
			line-height: 20px;
			height: 42px;
			padding: 11px 100px 11px 26px;
			border-radius: 3px;
			color: #9f9f9f;
			outline: none;
		}
		.search_btn {
			height: 42px;
			box-sizing: border-box;
			width: 100px;
			margin-left: -5px;
			cursor: pointer;
			text-align: center;
			background-color: #69bdfb;
			color: #fff;
			font-size: 15px;
			line-height: 42px;
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
			position: absolute;
			right: 0;
			top: 0;
			&:hover {
				background-color: #51b1f5;
			}
		}
		.search_list {
			position: absolute;
			width: 100%;
			font-size: 14px;
			background-color: #fff;
			z-index: 1;
			border-radius: 4px;
			box-shadow: 0px -1px #f3f3f3;
			& > div {
				padding-left: 26px;
				height: 36px;
				line-height: 36px;
				color: #666;
				&:hover {
					cursor: pointer;
					background-color: #f3f3f3;
					border-radius: 4px;
				}
			}
		}
	}
}
.top_tool {
	margin-left: 10px;
	a {
		color: #dff2ff;
		text-decoration: none;
		font-size: 13px;
		line-height: 42px;
		margin: 0 6px;
		&:hover {
			color: #ffffff;
		}
	}
}
.sidebar {
	position: sticky;
	top: 32px;
	left: 1.5%;
	margin-top: 32px;
	height: 480px;
	border-radius: 10px;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	text-align: center;
	padding: 10px 0;
	color: #444;
	.nav {
		cursor: pointer;
		font-size: 15px;
	}
}
.active {
	color: #ff5a00;
}
.contact {
	position: sticky;
	top: 680px;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 192px;
	.item {
		width: 46px;
		height: 40px;
		background-color: #e1e9ee;
		margin-top: 8px;
		line-height: 40px;
		text-align: center;
		color: #ffffff;
		font-size: 13px;
		border-radius: 4px;
		transition: 0.3s;
		cursor: pointer;
		&:hover {
			color: #ffa617;
		}
		.icon {
			font-size: 20px;
		}
	}
	.contact_item {
		position: absolute;
		bottom: 0;
	}
	#fankui {
		background-color: #99aebc;
		&:hover {
			color: #222222;
		}
	}
	#to_top {
		display: flex;
		align-items: center;
		justify-content: center;
		.icon {
			width: 24px;
			height: 24px;
		}
	}
}
.weixin_btn {
	position: relative;
	& > div {
		position: absolute;
		left: -190px;
		top: -150px;
		img {
			width: 160px;
			height: 284px;
			border-radius: 10px;
		}
	}
}
.rate {
	margin: 30px 0 10px;
}
.form-footer {
	display: flex;
	flex-direction: row-reverse;
	margin-top: 20px;
}
.complex {
	// padding:0 6.4% 0 10%;
	margin-top: 50px;
	padding-bottom: 40px;
	background-color: #ffffff;
	h2 {
		text-align: center;
		color: #1c95dc;
		font-size: 20px;
		margin: 56px auto 38px;
	}
	.tools {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		a {
			display: block;
			width: 30%;
			// width: 100px;
			height: 100px;
			line-height: 100px;
			margin-top: 10px;
			text-align: center;
			font-size: 36px;
			border-radius: 4px;
			background-color: #f3f8fb;
			color: #1c95dc;
			&:hover {
				background-color: #529cdb;
				color: #fff;
			}
			span {
				display: none;
			}
		}

		& > a:nth-child(-n + 3) {
			margin-top: 0;
		}
	}
	.ganhuolist {
		padding: 0 6%;
		div {
			display: flex;
			align-items: center;
			margin-bottom: 12px;
			&:hover {
				a {
					color: #1c95dc;
				}
				span {
					background-color: #1c95dc;
				}
			}
		}
		a {
			color: #a0a0a0;
			font-size: 14px;
			display: inline-block;
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		span {
			display: inline-block;
			height: 16px;
			width: 16px;
			text-align: center;
			line-height: 16px;
			border-radius: 16px;
			font-size: 12px;
			color: #ffffff;
			background-color: #a0a0a0;
			margin-right: 4px;
			cursor: pointer;
		}
		div:nth-child(-n + 3) {
			span {
				background-color: #1c95dc;
			}
		}
	}
	.wechat {
		text-align: center;
		img {
			width: 192px;
			border-radius: 6px;
			box-shadow: 0 0 18px rgba(50, 149, 217, 0.2);
			border: 1px solid #e2eef7;
			margin-bottom: 36px;
		}
		p {
			color: #a1a1a1;
			font-size: 13px;
			span {
				color: #1c95dc;
			}
		}
	}
	.count {
		color: #1c95dc;
		margin-top: 10px;
		text-align: center;
		strong {
			font-size: 66px;
			font-family: 'BebasNeue';
			letter-spacing: 4px;
			// font-weight: 900;
			span {
				font-size: 14px;
			}
		}
		.updata_time {
			i {
				margin-right: 2px;
			}
			color: #a1a1a1;
			font-size: 14px;
			margin-bottom: 70px;
		}
		.recommend {
			color: #1c95dc;
			font-size: 14px;
			margin-bottom: 32px;
			button {
				padding: 10px 12px;
				margin-left: 6px;
			}
		}
		.auther {
			padding-left: 16%;
			text-align: left;
			font-size: 14px;
			p {
				margin-bottom: 4px;
				a {
					color: #c7c7c7;
					&:hover {
						color: #1c95dc;
					}
				}
			}
		}
	}
}
.footer {
	background-color: #3295d9;
	text-align: center;
	padding: 28px 0 20px;
	font-size: 12px;
	line-height: 18px;
	color: #dff2ff;
	width: 100%;
	.copyright {
		display: flex;
		justify-content: center;
		align-items: center;
		a {
			margin: 0 4px;
			color: #dff2ff;
			// line-height: 24px;
		}
	}
	p {
		margin-bottom: 8px;
		span {
			margin: 0 6px;
			cursor: pointer;
		}
	}
}
</style>
